import React, { Component } from "react";
import "./style.less";
import QRCode from "qrcode.react";
import LogoPng from './logo.png';
import Request, { Delete, Get } from "./../../utils/request";
class Page extends Component {
  
  state = {
    id: '',
    detail: null
  };
  componentDidMount() {
    document.getElementById("root").style.minWidth = window.screen.width + "px";
    document.getElementById("root").style.width = window.screen.width + "px";
    var all =window.location.href.split('/');
    this.setState({
      id: all[all.length-1]
    },()=>{
      this.getInfo();
    })
    
  }
  getInfo() {
    Get("/mss/prize/get/" + this.state.id, {}).then(res => {
      let data = res.data;
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\n/g,
        "<br />"
      );
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\r/g,
        "<br />"
      );
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\r\n/g,
        "<br />"
      );
      this.setState({
        detail: res.data
      });
    });
  }
  render() {
    const { text } = this.props;
    const { detail } = this.state;
    return (
      <div className={'container'}>
        <img
          className={'logopng'}
          onClick={() => {
            this.reset();
          }}
          src={LogoPng}
        />
        {detail ? (
          <div className={'wrap'}>
            <div className={'jpTitle'}>您的中奖信息</div>
            <div className={'codeWrap'}>
              <QRCode
                value={this.state.id} //value参数为生成二维码的链接
                size={150} //二维码的宽高尺寸
                fgColor="#000000" //二维码的颜色
              />
            </div>
            <div
              className={
                detail.prize_state == "已使用" ? 'jpName1' : 'jpName'
              }
            >
              {detail.prize.name}
            </div>
            <div
              className={
                detail.prize_state == "已使用"
                  ? 'jpStatus1'
                  : 'jpStatus'
              }
            >
              {detail.prize_state}
            </div>
            <div className="jpSAddressLine"></div>
            <div
              className={'jpSAddress'}
              dangerouslySetInnerHTML={{ __html: detail["prize"]["explain"] }}
            ></div>
          </div>
        ) : (
          <div></div>
        )}
      </div>
    );
  }
}

export default Page;
